<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-22 11:50:11
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-24 09:19:46
--> 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品的详情页</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .show{
        width: 300px;
        height: 300px;
        border: 1px solid red;
        margin: 50px auto;
    }
    .show img{
        height: 70%;
        padding-left: 50px;
    }
    p{
        margin-top: 5px;
    }
</style>
<body>
    <div class="show" id="show">
      
    </div>
    <script src="./js/地址转换.js"></script>
    <script>
        
        /*
            拿到 列表页传过来的 参数 ，根据参数 去数据库中取对应的数据
         */
        // 相当于数据库的数据
        var goodlist = [
            { id: 111, url: './images/g1.jpg', name: '阿联酋美女1号', price: 1998, age: 20 },
            { id: 22, url: './images/g2.jpg', name: '阿联酋美女2号', price: 98, age: 18 },
            { id: 3325, url: './images/g3.jpg', name: '阿联酋美女3号', price: 998, age: 22 },
            { id: 4, url: './images/g4.jpg', name: '阿联酋美女4号', price: 9.8, age: 24 },
            { id: 5, url: './images/g3.jpg', name: '阿联酋美女5号', price: 9888, age: 18 }
        ]
        // 获取url的参数
        var p = location.search; //?id=111&name=阿联酋美女1号  {id:111,name:'阿联酋美女1号}
        // 把字符串  只拿到 111
        // substring(start) 当只有一个 参数的时候 ，表示从start索引位置开始截取 最后
        p = p.substring(1) //截取的是?之后的所有字符
        var obj={};
        arrToObj(p,function(value){
           obj =value; 
        })
      
        console.log(obj);
        // 拿id的属性值 去数据库匹配
        var res = goodlist.filter(function (item, index) {
            return obj.id==item.id;
        })
        console.log(res);
       var show = document.querySelector(".show");
        show.innerHTML =  "<img src='" +res[0].url+ "'alt=''>"+
        "<p>姓名:"+res[0].name+"</p>"+
       " <p>价格:"+res[0].price+"</p>"+
       " <p>年龄:"+res[0].age+"</p>"

        // res就是 根据id匹配=拿到的数据
        // 把数据渲染到页面

        // id=1&name=zhangsan&age=18&className=2003 变成以下对象
        // {id:1,name:zhangsan,age:18,className:2003}
        // var str='id=1&name=zhangsan&age=18&className=2005';
        
       
      /*   console.log(str1); */
        
    </script>

</body>

</html>